<template>
  <div class="box">
    <el-empty class="nothing" v-if="cardList.length===0" description="空空如也"></el-empty>
    <el-card class="box-card" shadow="hover" v-for="(card,index) in cardList" :key="index">
    <template #header>
      <div class="card-header" @click="showDetail(index)">
        <div class="title">{{ card.card_question }}</div>
      </div>
    </template>
    <div class="text" @click="showDetail(index)">{{ card.card_answer }}</div>
    <el-popconfirm
    width="220"
    confirm-button-text="确认"
    cancel-button-text="取消"
    title="您确认要删除此卡片吗？"
    @confirm="removeCard(card.card_id)"
    >
    <template #reference>
      <el-button v-show="me" class="button" text>删除</el-button>
    </template>
  </el-popconfirm>
  <div class="date">{{ card.card_date }}</div>
  </el-card>
  <el-dialog v-model="centerDialogVisible" width="35%" :close-on-click-modal = "false" :show-close="false">
    <div class="datetime">{{ date }}</div>
    <div class="question">{{ question }}</div>
    <div class="answer">{{ answer }}</div>
    <div class="relative">相关：{{ relative }}</div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false" type="primary">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessage } from 'element-plus'

export default defineComponent({
  name: 'MyCardView',
  setup () {
    const route = useRoute()
    const userId = route.query.usId
    const us = sessionStorage.getItem('userId')
    const cardList:any = ref(null)
    const centerDialogVisible = ref(false)
    const question = ref('')
    const answer = ref('')
    const date = ref('')
    const relative = ref('')
    const me = ref(false)
    const isMe = () => {
      if (userId === us) { me.value = true }
    }
    const getCard = () => {
      axios.post('http://localhost:8081/getCard', { user_id: userId }).then(res => {
        if (res.data != null) {
          cardList.value = res.data
        } else { ElMessage.error('服务器繁忙') }
      }).catch(error => {
        console.log(error)
      })
    }
    const removeCard = (item:any) => {
      axios.post('http://localhost:8081/removeCard', { card_id: item }).then(res => {
        if (res.data != null) {
          location.reload()
          ElMessage.success('删除成功')
        } else { ElMessage.error('服务器繁忙') }
      }).catch(error => {
        console.log(error)
      })
    }
    const showDetail = (item:any) => {
      centerDialogVisible.value = true
      question.value = cardList.value[item].card_question
      answer.value = cardList.value[item].card_answer
      date.value = cardList.value[item].card_date
      relative.value = cardList.value[item].card_text
    }
    getCard()
    isMe()
    return {
      cardList,
      removeCard,
      showDetail,
      centerDialogVisible,
      question,
      answer,
      date,
      relative,
      us,
      me
    }
  }
})
</script>
<style scoped>
.box{
  position: absolute;
  top: 60px;
  left: 50px;
  right: 50px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.title{
  margin-bottom: -10px;
  margin-top: -10px;
  text-align: left;
  font-size: 14px;
  font-weight: bolder;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

}
.text {
  margin-top: -10px;
  margin-bottom: 10px;
  font-size: 14px;
  text-align: left;
  height: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.date{
  margin-top: 5px;
  font-size: small;
  color: gray;
  float: left;
  margin-bottom: 10px;
}
.box-card {
  cursor: pointer;
  width: 350px;
  float: left;
  margin-left: 30px;
  margin-top: 30px;
}
.button{
  float: right;
  margin-bottom: 10px;
  height: 25px;
}
.question{
  font-size: 16px;
  font-weight: bolder;
  color: black;
  text-align: left;
  margin-bottom: 10px;
}
.answer{
  text-align: left;
  white-space: normal;
  word-break: break-all;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  color: black;
  font-size: 16px;
}
.relative{
  margin-top: 10px;
  text-align: left;
  white-space: normal;
  word-break: break-all;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  color: grey;
  font-size: 16px;
}
.datetime{
  margin-top: -30px;
  text-align: left;
  margin-bottom: 10px;

}
.nothing{
  top: 60px;
  color: gray;
  position: relative;
}
</style>
<style>
.el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
</style>
